/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="comment!=null">
		<view class="goods-mes pd-bg-fff">
			<view class="goods-img">
				<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ comment.goods_id+'&width=400&height=400'"role="img"></image>
			</view>
			<view class="goods-des">
				<view class="goods-name ellipsis-1">{{comment.goods_name}}</view>
				<view class="goods-package ellipsis-1">{{comment.spec_key_name}}</view>
			</view>
		</view>
		<view class="evaluation">
			<textarea @input="keyUpChangeNum" class="word-box" maxlength="500" placeholder="写下购买体会和使用感受来帮助其他小伙伴吧~"
			 selection-start="-1" selection-end="-1" cursor="-1">
		
		</textarea>
			<view class="words-num">{{500 - maxWord}}/500</view>
		</view>
		<view class="pic-list pd-bg-fff">
			<block v-for="(item,index) in 5" :key="index">
				<view class="share-pic">
					<image @longtap="removePhoto" @tap="selectPhotos" class="wh100" :data-idx="index" :src="filePaths[index]?filePaths[index]:defaultPhoto" role="img"></image>
				</view>
			</block>
		</view>
		<view class="anonymous">
				<image class="anonymousImg" @tap="checkAnonymous" v-if="ishide" :src="imgUrl+'cart/nocheck.png'"></image>
				<image class="anonymousImg" @tap="checkAnonymous" v-if="!ishide" :src="imgUrl+'common/ischeck.png'"></image>
			<!-- <icon @click="checkAnonymous" color="gray" size="20" type="success" role="img"></icon> -->
			<!-- <shopicon @tap="checkAnonymous" color="gray" size="20" type="success" role="img"></shopicon> -->
			<!-- <success-icon @click="checkAnonymous" color="gray" size="20" type="close" role="img"></success-icon> -->
			匿名评价
		</view>
		<view class="score-list pd-bg-fff">
			<view class="score-title">
				<view>评分</view>
				<view>满意请给5分哦</view>
			</view>
			<block v-if="order.is_comment==0">
				<view class="score-item">
				<view>与描述相符</view>
				<view class="stars">
					<block v-for="(item,index) in 5" :key="index">
						<image @tap="checkGoodsRank" :data-i="index" :src="index<goodsRank?imgUrl+'common/star-red.png':imgUrl+'common/star-gray.png'" role="img"></image>
					</block>
					
					
				</view>
			</view>
			<view class="score-item">
				<view>卖家服务</view>
				<view class="stars">
					<block v-for="(item,index) in 5" :key="index">
						<image @tap="checkServiceRank" :data-i="index" :src="index<serviceRank?imgUrl+'common/star-red.png':imgUrl+'common/star-gray.png'" role="img"></image>
					</block>
				</view>
			</view>
			<view class="score-item">
				<view>物流服务</view>
				<view class="stars">
					<block v-for="(item,index) in 5" :key="index">
						<image @tap="checkDeliverRank" :data-i="index" :src="index<deliverRank?imgUrl+'common/star-red.png':imgUrl+'common/star-gray.png'" role="img"></image>
					</block>
				</view>
			</view>
			</block>
			<view class="score-item">
				<view>商品满意度</view>
				<view class="stars">
					<block v-for="(item,index) in 5" :key="index">
						<image @tap="checkGoodsScore" :data-i="index" :src="index<goodsScore?imgUrl+'common/star-red.png':imgUrl+'common/star-gray.png'" role="img"></image>
					</block>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<view @tap="submitComment" class="submit-btn">提 交</view>
		</view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import select from "@/common/selectFiles.js";
	import common from "@/common/common.js";
	import {postGoodsComment,getOrderGoods,getOrderInfo,postOrderComment} from "@/api/api.js";
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				comment:null,
				ishide:true,
				maxWord:0,
				content:"",//评论
				goodsRank:0,//描述评分
				serviceRank:0,//卖家服务评分
				deliverRank:0,//物流评分
				defaultPhoto:config.imgUrl+"common/camera.png",//默认图片
				goodsScore:0,//商品满意度评分
				is_anonymous: false,//是否匿名
			    isLongPress: false, //是否进行长按图片操作,解决有些手机上短按和长按同时触发的问题
				filePaths:[],//图片本地路径
				uploadPath:[],//上传图片路径
				options:"",
				order:"",
			};
		},
	
		onLoad(options){
			console.log(options)
			this.options=options
			let red_id={
				rec_id:options.rec_id
			}
			this.getOrderGoods(red_id)
			let params={
				order_sn:options.order_sn
			}
			this.getOrderInfo(params)
		},
		
		methods:{
			/*请求订单商品*/ 
			getOrderGoods(red_id){
				getOrderGoods(red_id).then(res=>{
					console.log(res)
					if(res){
						
						this.comment=res;
						
					}
					
				})
			},
			/*订单信息*/ 
			getOrderInfo(params){
				getOrderInfo(params).then(res=>{
					console.log(res)
					if(res){
						this.order=res;
					}
				})
			},
			/*评论*/
			keyUpChangeNum(e){
				// console.log(e.detail.value.length)
				this.maxWord=e.detail.value.length
				this.content=e.detail.value
			},
			/*是否匿名*/ 
			checkAnonymous(){
				this.ishide=!this.ishide
				this.is_anonymous=!this.is_anonymous;
			},
			/*选择图片*/ 
			selectPhotos(e){
				if (this.isLongPress) {
					this.isLongPress = false;
					return;
				}
				var that=this;
				select.selectPhotos(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
					that.filePaths=filePaths 
					/*替换图片重绘*/ 
					that.$forceUpdate()
					// console.log(filePaths)
				});
			},
			/*删除图片*/
			removePhoto(e){
				var that = this;
				this.isLongPress = true;
				select.removePhoto(this.filePaths,e.currentTarget.dataset.idx,function(filePaths){
					that.filePaths=filePaths 
				})
			},
			
			/*评分*/
			/*描述评分*/
			checkGoodsRank(e){
				console.log(e)
				let index=parseInt(e.currentTarget.dataset.i)+1
				this.goodsRank=index;
				
			},
			/*卖家服务评分*/
			 checkServiceRank(e){
				let index=parseInt(e.currentTarget.dataset.i)+1
				 this.serviceRank=index;
			 },
			/*物流评分*/
			checkDeliverRank(e){
				let index=parseInt(e.currentTarget.dataset.i)+1
				this.deliverRank=index;
			},
			/*商品满意度评分*/ 
			checkGoodsScore(e){
				let index=parseInt(e.currentTarget.dataset.i)+1
				this.goodsScore=index;
			},
			/*上传图片*/
			postImg(call,pathIdx){
				var that=this;
				if(that.filePaths.length==0){
					return call()
				}
				if(typeof pathIdx!="number"){
					pathIdx=0;
				}else if(pathIdx>=that.filePaths.length){ //图片上传
					return call();
				}
				uni.uploadFile({
					url: "/api"+'/mall/upload', 
					filePath: that.filePaths[pathIdx],
					name: 'file',
					formData: {
						type:"comment",
					},
					success: (res) => {
					
						
						that.uploadPath[pathIdx]=JSON.parse(res.data).result
						// console.log(res)
						 that.postImg(call, pathIdx + 1); //递归上传多张图片
					}
				});
			},
			/*追加商品评价*/
			postGoodsComment(params){
				postGoodsComment(params).then(res=>{
					console.log(res)
					if(res.status==1){
						
						common.toast("none","商品评价成功",2000)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/user/comment/comment?status=0'
							})
						},2000)
						
					}
					
				})
			},
			/*追加订单评价*/ 
			postOrderComment(params){
				postOrderComment(params).then(res=>{
					if(res.status==1){
						// common.toast("none","订单评论成功",2000)
						// uni.navigateTo({
						// 	url:'pages/user/comment/comment'
						// })
					}
					
				})
			},
			/*提交图片*/ 
			submitComment(){
				// if()
				if(this.content==""){
					return common.toast("none","请填写评论",2000)
				}
				if(!this.goodsScore){
					return common.toast("none","请先打完分~",2000)
				}
				if(this.order.is_comment==0){ //订单添加评论
					if(!this.goodsRank||!this.serviceRank||!this.deliverRank||!this.goodsScore){
						return common.toast("none","请先打完分~",2000)
					}
					let params={
						"describe_score":this.goodsRank,//描述评分
						"seller_score":this.serviceRank,//服务评分
						"logistics_score":this.deliverRank,//物流评分
						"order_id":this.comment.order_id
					}
					this.postOrderComment(params)
					let goodsParams={
						"is_anonymous":Number(this.is_anonymous),//是否匿名
						"content":this.content,
						"goods_rank":this.goodsScore,//商品满意度
						"rec_id":this.options.rec_id,
						img:this.uploadPath.join()
					}
					this.postGoodsComment(JSON.stringify(goodsParams))
				}else{
					let goodsParams={
						"is_anonymous":Number(this.is_anonymous),//是否匿名
						"content":this.content,
						"goods_rank":this.goodsScore,//商品满意度
						"rec_id":this.options.rec_id,
						img:this.uploadPath.join()
					}
					this.postGoodsComment(JSON.stringify(goodsParams))
				}
				
				
				
			},
		}
	}
</script>

<style lang="scss">
	/* add_comment.wxss */
	.goods-mes {
		height: 100rpx;
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
	}
	.anonymousImg{
		display: flex;
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.goods-img {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
	}

	.goods-des {
		width: 560rpx;
	}

	.goods-des>view {
		width: 100%;
		height: 32rpx;
		line-height: 1;
		font-size: 32rpx;
		color: #333;
	}

	.goods-package {
		margin-top: 36rpx;
	}

	.evaluation {
		padding: 30rpx 30rpx;
		position: relative;
		font-size: 28rpx;
	}

	.word-box {
		color: #333;
		line-height: 40rpx;
		width: 100%;
		height: 200rpx;
	}

	.words-num {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		color: #666;
	}

	.pic-list {
		padding: 40rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.share-pic {
		width: 126rpx;
		height: 126rpx;
		border: 1px solid #f3f3f3;
		overflow: hidden;
	}

	.anonymous {
		height: 60rpx;
		padding: 0 20rpx 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #666;
	}

	.anonymous>icon {
		margin-right: 20rpx;
	}

	.score-list {
		margin-top: 20rpx;
	}

	.score-list>view {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333;
	}

	.score-title {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.score-item {
		align-items: center;
		height: 80rpx;
	}

	.stars {
		display: flex;
	}

	.stars image {
		width: 44rpx;
		height: 40rpx;
	}

	.btn-wrap {
		padding: 20rpx 0;
		background-color: #fff;
		border-top: 1px solid #f3f3f3;
	}

	.submit-btn {
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #f15353;
		color: #fff;
		margin: auto;
		border-radius: 10rpx;
	}
</style>
